<template>
	<view>
		<hd-popup ref="popup" type="bottom">
			<view class="top-content border-line">
				<view class="btn" @click="close()">取消</view>
				<view class="btn" :style="[{ color: getMainColor() }]" @click="confirm()">确定</view>
			</view>
			<scroll-view class="list-content" scroll-y="true">
				<view class="item-content border-line" :class="isSelect(item[field]) ? 'active' : ''" v-for="(item, index) in listData" :key="index" @click="select(item[field])">
					<view class="left">
						<text v-if="showIcon == 'left' && isSelect(item[field])" class="iconfont" :style="[{ color: getMainColor() }]">&#xe63d;</text>
					</view>
					<view class="content" :style="[{ color: isSelect(item[field]) ? getMainColor() : '' }]">{{ item['name'] }}</view>
					<view class="right">
						<text v-if="showIcon == 'right' && isSelect(item[field])" class="iconfont" :style="[{ color: getMainColor() }]">&#xe63d;</text>
					</view>
				</view>
			</scroll-view>
		</hd-popup>
	</view>
</template>

<script>
import hdPopup from '../hd-popup/hd-popup.vue';
export default {
	name: 'hdMultiple',
	components: {hdPopup},
	props: {
		showIcon: {
			//显示图标
			type: String,
			default: 'left'
		},
		field: {
			type: String,
			default: 'code'
		},
		listData: {
			type: Array,
			default() {
				return [];
			}
		},
		selectValue: {
			//默认值
			type: [String, Number],
			default: ''
		}
	},
	computed: {
		isSelect(value) {
			return (value) => {
				return this.selectList.includes(value);
			};
		}
	},
	data() {
		return {
			selectList: []
		};
	},
	created() {
		this.selectList = (this.selectValue + '').split(',');
	},
	methods: {
		select(value) {
			let selectList = this.selectList;
			if (selectList.includes(value)) {
				selectList.splice(
					selectList.findIndex((item) => item == value),
					1
				);
			} else {
				selectList.push(value);
			}
			this.selectList = selectList;
		},
		// 关闭事件
		close() {
			this.$refs.popup.close();
		},
		// 打开事件
		open(value) {
			if (value) {
				if (value instanceof Array) {
					this.selectList = value;
				} else if (typeof value == 'string') {
					this.selectList = value.split(',');
				}
			}
			this.$refs.popup.open();
		},
		confirm() {
			let list = [];
			let nameList = [];
			let codelist = [];
			let result = this.listData.filter((item, index) => {
				if (this.selectList.includes(item[this.field])) {
					list.push(item[this.field]);
					nameList.push(item['name']);
					return true;
				} else {
					return false;
				}
			});
			this.$emit('confirm', {
				value: list.join(','),
				name: nameList.join(','),
				result
			});
			this.$refs.popup.close();
		}
	}
};
</script>

<style lang="scss">
.top-content {
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 88upx;
	.btn {
		width: 100upx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30upx;
		color: #343434;
	}
}
.border-line {
	position: relative;
}
.border-line::after {
	content: '';
	pointer-events: none; /* 防止点击触发 */
	box-sizing: border-box;
	position: absolute;
	width: 200%;
	height: 200%;
	left: 0;
	top: 0;
	-webkit-transform: scale(0.5);
	-webkit-transform-origin: 0 0;
	transform: scale(0.5);
	transform-origin: 0 0;
	border-bottom: 1px solid #e1e1e1;
}
.list-content {
	height: 476upx;
	background-color: #f5f5f5;
}
.list-content .item-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 80upx;
}
.list-content .item-content.active {
	background-color: #fff;
}
.list-content .item-content .left,
.list-content .item-content .right {
	width: 100upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.list-content .item-content .content {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #343434;
}
</style>
